<template>
  <div class="table">
    <el-table
      :data="tableData"
      :cell-style="{ 'text-align': 'center', color: '#555' }"
      :header-cell-style="{ 'text-align': 'center' }"
      :header-row-style="{ color: '#555' }"
      border
      style="width: 100%"
    >
    <el-table-column
    label="序号"
      type="index"
      width="50">
    </el-table-column>
      <el-table-column prop="date" label="数据库" width="180">
      </el-table-column>
      <el-table-column prop="name" label="数据表" width="180">
      </el-table-column>
      <el-table-column prop="address" label="数据"> </el-table-column>
    </el-table>
    <el-pagination background
    :current-page="currentPage"
    :page-size="pageSize"
    layout="prev, pager, next" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data () {
    return {
      total: 100,
      pageSize: 10,
      currentPage: 1,
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: ' 金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: ' 江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: ' 沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 江路 1516 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: ' 沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 江路 1516 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: ' 沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 江路 1516 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: ' 沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: ' 江路 1516 弄'
        }

      ]
    }
  }
}
</script>

<style lang="less" scoped>
.table {
  overflow: hidden;
  // width: 99% !important;
  height: 99%;
  margin: 5px auto;
  .el-pagination {
    padding: 20px 0;
    text-align: center;
    background: #fff;
  }
}
</style>
